import React from 'react';
import { RightOutlined } from '@ant-design/icons';
import { getNavigationUrl } from '@api/home';

export default function Index({ item }) {
  const { icon, name, desc, port = 2280 } = item;

  const handleClick = async id => {
    const data = await getNavigationUrl(id, port);
    const url = data.data.navigationUrl;
    window.open(url, '_blank');
  };

  return (
    <div className="w-full h-full flex justify-between items-center" onClick={() => handleClick(item.id)}>
      <div className="flex items-center">
        <img src={icon || '/images/default-link.png'} alt="" className="w-6 h-6" />
        <div className="pl-4 text-xl font-normal">{name}</div>
        {desc && <div className="pl-4 text-new-desc-dark  text-sm">{desc}</div>}
      </div>
      <div>
        <RightOutlined />
      </div>
    </div>
  );
}
